<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <link rel="stylesheet" type="text/css" href="./ion.rangeSlider.min.css">
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="./ion.rangeSlider.min.js"></script>
</head>
<body>
    <div style="width: 500px;">
        <div id="ionrange_speed"></div>
        <br>
        <div id="ionrange_process"></div>
    </div>
    <script>
        // 初始化速度条
    var speedSlider = $("#ionrange_speed").ionRangeSlider({
        min: 1,
        max: 10,
        step: 0.5,
        from: 5,
        postfix: "倍",
        prettify: false,
        hasGrid: true,
        onFinish: function (data) {
           console.log(data);
        },
    });

    // 初始化进度条
    var speedSlider = $("#ionrange_process").ionRangeSlider({
        min: 0,
        max: 100,
        step: 1,
        from: 0,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        onUpdate: function (data) {
            //车辆移动的时候，使用JS方法更新进度条，触发该方法： 记录车辆回放的进度
            console.log("onUpdate"+data);
        },
        onChange: function (data) {
            //手动拖动进度条过程中触发：移动车辆，定位车辆回放位置
            console.log("onChange"+data);
        },
        onFinish: function (data) {
            //拖动进度条，确定释放后触发，从当前位置开始回放
           console.log("onFinish"+data);
        }
    });
    </script>
</body>
</html>